<template>
  <div class="topList-wrap">
    <div class="topList-center">
      <div class="topList-left">
        <dl class="topList-nav-list" v-for="top in topList" :key="top.groupId">
          <dt class="topList-nav-tit">{{top.groupName}}</dt>
          <dd class="topList-nav-item" v-for="toplist in top.toplist" :key="toplist.topId">
            <a :class="{
              'topList-nav-link' :true,
              'topList-active' : isId === toplist.topId
            }" @click="goTopList(toplist.topId)">{{toplist.title}}</a>
          </dd>
        </dl>
      </div>
      <div class="topList-right">
        <div class="topList-header">
          <h1 class="topList-h">{{title}}</h1>
          <span>{{uptime}}</span>
          <a href="#">榜单规则</a>
        </div>
        <div class="topList-btn-List">
          <div class="topList-btn-item topList-btn-active">
            <div class="topList-btn-ac">
              <span class="iconfont icon-play1"></span>
              播放全部
            </div>
          </div>
          <div class="topList-btn-item">
            <div class="topList-btn-ac">
              <span class="iconfont icon-plus-square"></span>
              添加到
            </div>
          </div>
          <div class="topList-btn-item">
            <div class="topList-btn-ac">
              <span class="iconfont icon-download"></span>
              下载
            </div>
          </div>
          <div class="topList-btn-item">
            <div class="topList-btn-ac">
              <span class="iconfont icon-edit3"></span>
              批量操作
            </div>
          </div>
          <div class="topList-btn-item">
            <div class="topList-btn-ac">
              <span class="iconfont icon-comment"></span>
              评论
            </div>
          </div>
        </div>
        <div class="topList-mod">
          <div class="topList-mod-hd">
            <div class="mod-item">歌曲</div>
            <div class="mod-con">歌手</div>
            <div class="mod-time">时长</div>
          </div>
          <div class="topList-mod-list" v-for="ranks in topRanksData" :key="ranks.songId">
            <h1 :class="{'topList-active-to':ranks.rank <= 3}">{{ranks.rank}}</h1>
            <span class="mod-icon">
              <i class="iconfont icon-graph"></i>
              <span>{{ranks.rankValue}}</span>
            </span>
            <router-link :to="{path:`/albumDetail/${ranks.albumMid}`}" class="mod-link-img">
              <img
                :src="ranks.cover"
                :alt="ranks.singerName"
              />
            </router-link>
            <div class="topList-mod-link">
              <div class="mod-link-left">
                <a href="#" class="mod-link-con">{{ranks.title}}</a>
                <span class="mod-link-text">{{ranks.singerName}}</span>
                <a href="#" class="mod-link-conto">
                  <span>MV</span>
                </a>
              </div>
              <div class="mod-link-right">
                <a href="#"> <span class="iconfont icon-play1"></span></a>
                <a href="#"><span class="iconfont icon-plus"></span></a>
                <a href="#"><span class="iconfont icon-share"></span></a>
              </div>
            </div>
            <div class="topList-mod-name">
              <a href="#">{{ranks.singerName}}</a>
            </div>
            <div class="topList-mod-time">04:51</div>
          </div>
        
        </div>
        <div class="topList-page">
          <div class="topList-page-text">
            <p>查看更多内容，请下载客户端</p>
            <a href="#" class="topList-page-link">立即下载</a>
          </div>
        </div>
        <div class="topList-mod-comment">
          <div class="topList-mod-comment-text">
            <h1>评论<span>共{{CommentTotal}}条评论</span></h1>
          </div>
          <div class="topList-mod-comment-input">
            <textarea name="" id="" cols="30" rows="10" placeholder="说说你的看法"></textarea>
            <div class="topList-mod-comment-btn">发表评论</div>
          </div>
          <div class="topList-mod-comment-md">
            <h1>全部评论</h1>
            <ul class="comment-list">
              <li class="comment-item" v-for="comments in CommentData" :key="comments.nick">
                <div class="comment-wrap">
                  <a href="#">
                    <img :src="comments.avatarurl">
                  </a>
                 <div class="comment-right">
                  <h4>{{comments.nick}}</h4>
                  <div>{{comments.rootcommentcontent}}</div>
                 </div>
                </div>
              </li>
             
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "TopList",
}
</script>

<script lang="ts" setup>
import { getTopListApi,getRanksApi,getCommentsApi } from '@/api/topList/topListApi'
import { onMounted, ref ,computed} from 'vue'
import { useRouter} from 'vue-router'
import type {TopListData,TopList} from '@/api/topList/model/topListModel'
import type { Toplistper, ToplistperList,CommentListApi } from '@/api/topList/model/topListModelTo'

const topList = ref<TopList>([])
const topRanksData = ref<ToplistperList>([])
const CommentData = ref<CommentListApi>([])
const CommentTotal = ref(0)
// 获取排行榜左侧列表
const getTopApi = async () => {
  const res =  await getTopListApi()
  // console.log(res)
  topList.value = res.req_1.data.group
  // console.log(topList.value)
}
const page = ref(1)
const limit = ref(20)
const router = useRouter()
const isId = ref(4)
const title = ref('')
const uptime = ref('')
// 获取排行榜数据
const getTopRanksApi = async (id: number) => {
  const res = await getRanksApi(id)
  // console.log(res)
  topRanksData.value = res.req_1.data.data.song.filter((item,index) => {
    return index < 20
  })
  title.value = res.req_1.data.data.musichallTitle
  uptime.value = res.req_1.data.data.updateTime
  // console.log(topRanksData.value)
}
onMounted(() => {
  getTopApi()
  getTopRanksApi(isId.value)
  getCommentListApi(isId.value)
})
// 获取排行榜信息
const goTopList = (id:number) => {
  // console.log(id)
  isId.value = id
  getTopRanksApi(id)
  getCommentListApi(isId.value)
  router.push({
    name: 'TopList',
    query:{id:isId.value}
  })
  // router.push(`/topList/${isId.value}`)
  // getTopRanksApi(isId.value)
 
}
// 获取评论
const getCommentListApi = async (id:number) => {
  const res = await getCommentsApi(id)
  CommentData.value = res.comment.commentlist
  CommentTotal.value = res.comment.commenttotal
    // console.log(res)
}
</script>

<style scoped>
.topList-active {
  background-color: #31c27c;
  color: #fff !important;
}
.topList-active-to{
  color: #ff4222;
}
.topList-wrap {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}
.topList-center {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  padding-top: 60px;
}
.topList-left {
  border: 1px solid #e5e5e5;
  height: 1700px;
}
.topList-nav-list {
  width: 178px;
  margin: 0 0 20px;
}

.topList-nav-tit {
  width: 144px;
  height: 60px;
  margin: 0 17px 10px;
  line-height: 60px;
  font-size: 20px;
  border-bottom: 1px solid #ebebeb;
  color: #000;
}
.topList-nav-item {
  width: 100%;
  height: 38px;
}
.topList-nav-link {
  width: 144px;
  display: block;
  padding: 8px 17px;
  font-size: 15px;
  color: #000;
}
.topList-nav-item .topList-nav-link:hover {
  color: #31c27c;
  text-decoration: none;
}
.topList-right {
  margin-left: 30px;
}
.topList-header {
  display: flex;
  height: 64px;
  margin-bottom: 10px;
  line-height: 64px;
  color: #000;
}
.topList-header .topList-h {
  font-size: 24px;
  font-weight: 400;
  
  margin: 0;
  margin-right: 15px;
}
.topList-header span {
  font-size: 14px;
}
.topList-header a {
  font-size: 14px;
  color: #000;
  margin-left: 15px;
}
.topList-header a:hover {
  color: #31c27c;
  text-decoration: none;
}
.topList-btn-List {
  margin-bottom: 10px;
}
.topList-btn-item {
  width: 123px;
  height: 38px;
  display: inline-block;
  border: 1px solid #c9c9c9;
  margin-right: 10px;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  box-sizing: border-box;
  cursor: pointer;
}
.topList-btn-ac{
  width: 100%;
  height: 100%;
  /* background-color: #fff; */
}
.topList-btn-item:hover .topList-btn-ac{
  background-color: rgba(0,0,0,.3);
}
.topList-btn-active {
  background-color: #31c27c;
  color: #fff;
}
.iconfont {
  font-size: 25px;
  display: inline-block;
  vertical-align: top;
}
.topList-mod {
  width: 990px;
}
.topList-mod-list {
  display: flex;
  width: 100%;
  height: 80px;
}
.topList-mod-list h1 {
  width: 40px;
  height: 80px;
  line-height: 80px;
  font-size: 24px;
  font-weight: 400;
  text-align: right;
  margin: 0;
}
.topList-mod-list .mod-icon {
  width: 72px;
  height: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.icon-graph {
  font-size: 14px;
}

.topList-mod-hd {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f7f7f7;
}
.topList-mod-link {
  display: flex;
  height: 80px;
  width: 470px;
  line-height: 80px;
  justify-content: space-between;
}
.topList-mod-link .mod-link-con {
  margin-left: 20px;
  font-size: 14px;
  color: #000;
}
.mod-link-conto {
  border: 1px solid #31c37c;
  border-radius: 5px;
  text-align: center;
  width: 40px;
  height: 16px;
  margin-left: 5px;
  text-decoration: none;
}
.mod-link-conto span {
  padding: 0 5px;
  color: #31c37c;
}
.mod-link-left .mod-link-text {
  padding-left: 10px;
  font-size: 14px;
  color: #999;
}
.mod-item {
  width: 556px;
  height: 50px;
  padding-left: 115px;
}
.mod-link-img {
  width: 70px;
  margin-top:5px;
  height: 70px;
}
.mod-link-img img {
  width: 100%;
  height: 100%;
}
.mod-con {
  width: 198px;
  height: 50px;
}
.mod-link-right {
  display: none;
}
.mod-link-right a {
  width: 36px;
  height: 36px;
  border: 1px solid #999;
  margin: 0 auto;
  line-height: 36px;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  margin-left: 10px;
}
.mod-link-right a:hover {
  border: 1px solid #31c27c;
  color: #31c27c;
}
.topList-mod-name {
  width: 198px;
  height: 80px;
  line-height: 80px;
}
.topList-mod-name a {
  font-size: 14px;
  color: #000;
  padding-left: 20px;
}
.topList-mod-list:hover .mod-link-right {
  display: block;
}
.topList-mod-time {
  height: 80px;
  line-height: 80px;
  color: #999;
  padding-left: 20px;
}

.topList-page{
  width: 100%;
  height: 80px;
  margin: 60px 0 20px;
}
.topList-page-text{
  width: 100%;
  height: 100%;
  text-align: center;
}
.topList-page-text p{
  font-size: 18px;
  color: #000;
}
.topList-page-text a{
  display: block;
  width: 175px;
  height: 41px;
  background-color: #31c27c;
  margin: 0 auto;
  color: #fff;
  font-size: 16px;
  line-height: 41px;
  border-radius: 41px;
  margin-top: 20px;
  text-align: center;
}
.topList-mod-comment{
  width: 990px;
}
.topList-mod-comment-text{
  width: 100%;
  height: 60px;

}
.topList-mod-comment-text h1{
  font-size: 24px;
  font-weight: 400;
  color: #000;
}
.topList-mod-comment-text h1 span{
  font-size: 14px;
  padding-left: 10px;
  color: #999;
}
.topList-mod-comment-input textarea{
  border: none;
  background-color: #f5f5f5;
  width: 970px;
  height: 100px;
  padding-top: 20px;
  padding-left: 20px;
}
.topList-mod-comment-btn{
  color: #fff;
  text-align: center;
  line-height: 27px;
  margin-top: 10px;
  width: 80px;
  height: 27px;
  background-color: #31c27c;
  margin-left:910px
}
.topList-mod-comment-md{
  height: 100%;
}
.topList-mod-comment-md h1{
  width: 100%;
  height: 45px;
  border-bottom: 1px solid #c9c9c9;
}
.comment-list{
  width: 100%;
}
.comment-item{
  width: 100%;
  height: 140px;

  /* background-color: red; */

}
.comment-item .comment-wrap{
  width: 914px;
  height: 113px;
  display: flex;
  padding-top: 20px;
}
.comment-item .comment-wrap a{
  display: block;
  width: 38px;
  height: 38px;
}
.comment-item .comment-wrap a img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.comment-item .comment-right{
  margin-left: 10px;
}
.comment-item .comment-right h4{
  height: 26px;
  color: #999;
}
.comment-item .comment-right p{
  color: #999;
  margin-bottom: 10px;
}
</style>
